<template>
	<view class="busInfoPay">
		<!-- 头部组件 -->
		<businfoHead :question="question" :refund="refund"></businfoHead>
		<!-- 已经选择的乘车人 -->
		<view id="userList" class="passenger" v-if="selectUserList.length > 0">
			<view id="userListItem" v-for="item in selectUserList" :key="index">
				<view class="userBao">
					<view>{{ item.name }}</view>
					<view class="baoStyle" v-if="baoPrice != 0">
						<text style="color: #FF5500;">￥{{ baoPrice }}</text>
						元乘意险
					</view>
					<view class="baoStyle" v-if="baoPrice == 0">不够买保险</view>
				</view>
				<view class="cardId">{{ item.cardId }}</view>
			</view>
		</view>
		<button class="passenger" type="default" @click="declick">选择乘车人</button>

		<view class="baoxian">
			<view class="bTitle">
				<view class="btLeft">选择保险</view>
				<view class="bRight" @click="insurance">
					<text style="color: #616161;">保险协议</text>
					<view class="bImg"><image src="../../static/img/rightOff.png" mode=""></image></view>
				</view>
			</view>
			<view class="bFlex">
				<view v-for="(item, index) in radioItems" :key="index">
					<view
						class="groupBody"
						:class="{ changeColor: changeIndex == index && changeColor == true }"
						@click="bChange(index, item.productId, item.insurePrice)"
						:key="index"
					>
						<view class="groupItem groupItem1" :class="{ changeColor: changeIndex == index && changeColor == true }">{{ item.productName }}</view>
						<view class="groupItem groupItem2" :class="{ changeColor: changeIndex == index && changeColor == true }" v-if="item.insureAmount">
							保额{{ item.insureAmount }}元
						</view>
						<view class="groupItem groupItem3" :class="{ changeColor: changeIndex == index && changeColor == true }" v-if="item.insurePrice">
							<text style="color: #FF5300;font-size: 26upx;">￥{{ item.insurePrice }}</text>
							<text>&emsp;x 1份</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 线路说明 -->
		<view class="circuit">
			<uni-collapse @change="change">
				<uni-collapse-item title="线路说明" open="true">
					<view class="content">{{ notice[0] }}</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<!-- 常见问题组件 -->
		<view class="" style="width: 95%; margin: auto;">
			<view style="margin-bottom: 130upx;"><problem :JSONData="JSONData" @PIndex="PIndex" /></view>
		</view>

		<view class="orderBtn">
			<text class="PayNum">{{ payPrice }}</text>
			<text>元</text>
			<text class="mingxi" @click="mFun">明细</text>
			<text @tap="goOrder" class="toPay">预 定</text>
		</view>
		<!-- 明细详情 -->
		<view class="mInfo" v-if="orderTrue">
			<view class="infoFlex">
				<view class="itemFlex">
					<view class="infoPay">车票单价</view>
					<view class="infoPay2 infoPay">￥{{ busInfoMsg.price }} x {{ selectUserList.length }}人</view>
				</view>
				<view class="itemFlex">
					<view class="infoPay">技术服务费</view>
					<view class="infoPay2 infoPay">￥{{ busInfoMsg.feePrice }} x {{ selectUserList.length }}人</view>
				</view>
				<view class="itemFlex">
					<view class="infoPay">乘意险</view>
					<view class="infoPay2 infoPay">￥{{ baoPrice }} x {{ selectUserList.length }}人</view>
				</view>
			</view>
		</view>

		<!-- 选择乘车人组件 -->
		<view v-show="off" :animation="animationData" class="animationUser"><userSelect @declick="tick" @seltUser="seltUser" v-bind:userList="userList" /></view>
		<!-- 乘车人遮罩层 -->
		<view v-if="off" id="ViewModel"></view>
		<!-- 订单明细遮罩层 -->
		<view v-if="orderTrue" id="ViewModel"></view>
	</view>
</template>

<script>
import value from '@/static/value/value.js';
import userSelect from '@/pages/views/userSelect/userSelect.vue';
import businfoHead from '@/pages/views/businfoHead/businfoHead.vue';
import problem from '@/pages/views/problem/problem.vue';
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
export default {
	data() {
		return {
			notice: value.value.JSONData.notice2,
			question: value.value.JSONData.question,
			JSONData: value.value.JSONData.questionList,
			// 遮罩层
			ViewModel: false,
			orderTrue: false,
			// 动画弹出乘车人选择框
			animationData: {},
			off: false,
			userList: [],
			selectUserList: [],
			selectId: [],
			baoxianList: [],
			// 保险选择
			radioItems: [],
			baoPrice: 0,
			// 保险ID
			baoxianId: 0,
			changeColor: '',
			changeIndex: false,
			busInfoMsg: value.value.busInfoMsg,
			payPrice: 0,
			refund: ''
		};
	},
	components: {
		userSelect,
		businfoHead,
		problem,
		uniCollapse,
		uniCollapseItem
	},
	onUnload() {
		this.animationData = {};
		// 页面关闭后清空数据
	},
	onLoad() {
		this.getBao();
		const that = this;
		uni.getStorage({
			key: 'departStation',
			success: function(res) {
				that.refund = res.data.isCanRefund;
			}
		});
	},
	onShow() {
		this.getData();
		// 初始化一个动画
		var animation = uni.createAnimation({
			duration: 300,
			timingFunction: 'ease'
		});
		this.animation = animation;
	},
	methods: {
		PIndex(i) {
			if (i) {
				uni.navigateTo({
					url: '../views/webHTML/webHTML?index=0&select=' + i
				});
			} else {
				uni.navigateTo({
					url: '../views/webHTML/webHTML?index=0'
				});
			}
		},
		clacPrice() {
			var price =
				this.selectUserList.length * Number(this.busInfoMsg.price) +
				this.selectUserList.length * Number(this.busInfoMsg.feePrice) +
				this.selectUserList.length * Number(this.baoPrice);
			this.payPrice = price;
		},
		mFun() {
			this.orderTrue = !this.orderTrue;
		},
		bChange(i, id, p) {
			if (this.changeColor && this.changeIndex == i) {
				this.changeColor = !this.changeColor;
				this.baoPrice = 0;
				this.baoxianId = 0;
			} else {
				this.baoPrice = p;
				this.baoxianId = id;
				this.changeColor = true;
			}
			this.changeIndex = i;
			this.clacPrice();
		},
		seltUser(v) {
			if (v) {
				this.getData();
			}
		},
		tick(val) {
			this.selectId = val;
			if (val) {
				this.selectUserList = [];
				this.userList.forEach((item, index) => {
					if (val.indexOf(String(item.id)) > -1) {
						this.selectUserList.push(item);
					}
				});
			}
			this.selectUserList = this.$ut.Unique(this.selectUserList);
			this.declick();
			this.clacPrice();
		},
		getBao() {
			const that = this;
			let obj = {
				ticks: this.$ut.GetTicks(),
				channel: 'Xcx'
			};
			obj.sign = this.$ut.GetSign(obj);
			this.$http
				.request({
					url: `/Insure/GetInsureProduct`,
					method: 'get',
					data: obj
				})
				.then(res => {
					that.radioItems = res.data.insureProducts;
				})
				.catch(err => {
					console.log(err);
				});
		},
		getData() {
			const that = this;
			let obj = {
				ticks: this.$ut.GetTicks(),
				channel: 'Xcx'
			};
			obj.sign = this.$ut.GetSign(obj);
			this.$http
				.request({
					url: `/Member/GetTakeManInfo`,
					method: 'get',
					data: obj
				})
				.then(res => {
					that.userList = res.data.takemanInfos;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 下拉弹出保险选择
		insur() {},
		// 下拉弹出乘客列表
		declick(e) {
			if (!this.off) {
				// 使用动画
				this.rotateAndScale();
			} else {
				this.norotateAndScale();
			}
		},
		// 定义动画内容
		rotateAndScale() {
			this.off = !this.off;
			setTimeout(() => {
				// 定义动画内容
				this.animation.translateY('-30rem').step();
				// 导出动画数据传递给data层
				this.animationData = this.animation.export();
			}, 80);
		},
		norotateAndScale() {
			this.animation.translateY('30rem').step();
			this.animationData = this.animation.export();
			setTimeout(() => {
				this.off = !this.off;
			}, 200);
		},
		goOrder() {
			if (this.selectId && this.selectId.length > 0) {
				uni.navigateTo({
					url: '../payMsg/payMsg?id=' + this.selectId + '&bid=' + this.baoxianId
				});
			} else {
				this.$ut.Msg('请先选择联系人');
			}
		},
		change(e) {},
		// 保险协议
		insurance() {
			uni.navigateTo({
				url: '../agreement/agreement'
			});
		}
	}
};
</script>

<style scoped>
/* 线路说明 */
.circuit {
	width: 95%;
	margin: auto;
	margin-top: 20upx;
	border-radius: 10upx;
}
.content {
	width: 96%;
	margin: auto;
	color: #808080;
	font-size: 28upx;
	padding-bottom: 20upx;
	border-top: 1upx solid #cccccc;
}
/* 已选乘车人的保险金额显示 */
.userBao {
	display: flex;
	justify-content: space-between;
}
.cardId {
	font-size: 30upx;
}
.baoStyle {
	font-size: 24upx;
	color: #a9a9a9;
}
/* 保险 */
.infoPay2 {
	color: #ff5500;
}
.mInfo {
	width: 100%;
	z-index: 99;
	bottom: 102upx;
	height: 100upx;
	position: fixed;
	padding: 30upx 0 60upx 0;
	background-color: #ffffff;
	border-top-left-radius: 15upx;
	border-top-right-radius: 15upx;
}
.infoFlex {
	width: 90%;
	margin: 0 auto;
}
.itemFlex {
	display: flex;
	justify-content: space-between;
	line-height: 44upx;
}

.btLeft {
	display: inline-block;
}
.bInfo {
	float: right;
}
.groupItem1 {
	font-size: 26upx;
}
.groupItem2 {
	font-size: 22upx;
	color: #a6a6a6;
}
.groupItem3 {
	font-size: 22upx;
	color: #a6a6a6;
}
.groupItem {
}
.changeColor {
	color: #3aaaeb;
}
.groupBody {
	border: 1px solid #3aaaeb;
	margin: 10upx;
	text-align: center;
	border-radius: 10upx;
	padding: 8upx;
}
.bTitle {
	width: 90%;
	height: 70upx;
	line-height: 70upx;
	margin: 0 auto;
	position: relative;
	border-bottom: 1px solid #ebebeb;
}
.bImg {
	width: 16upx;
	height: 24upx;
	display: inline-block;
	padding-left: 20upx;
}
.bRight {
	float: right;
}
.bImg image {
	max-width: 100%;
	max-height: 100%;
}
.baoxian {
	width: 95%;
	background-color: #ffffff;
	margin: 0 auto;
	border-radius: 10upx;
	margin-top: 20upx;
	padding-bottom: 20rpx;
}
.bFlex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 95%;
	font-size: 28upx;
	margin: 0 auto;
	padding-left: 10upx;
}

.dRadio {
	line-height: 60upx;
	transform: scale(0.7);
}

.bItem {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
/* 保险结束 */
#ViewModel {
	width: 100%;
	height: 100%;
	background-color: #c0c0c0;
	opacity: 0.3;
	position: absolute;
	top: 0;
}
.orderBtn {
	position: fixed;
	bottom: 0;
	height: 100upx;
	line-height: 100upx;
	background: #ffffff;
	width: 100%;
	border-top: #999999;
	border-top: 1px solid #eeeeee;
	z-index: 99;
}

.mingxi {
	color: #01a1e9;
	width: 100upx;
	height: 100upx;
	line-height: 100upx;
	position: absolute;
	right: 35%;
	font-size: 30upx;
}
.PayNum {
	display: inline-block;
	color: #ff5500;
	font-size: 50upx;
	padding-left: 30upx;
}
.toPay {
	font-size: 36upx;
	display: inline-block;
	text-align: center;
	width: 30%;
	background-color: #01a1e9;
	color: #ffffff;
	position: absolute;
	right: 0;
}
.animationUser {
	position: fixed;
	top: 1400upx;
	background: #ebebeb;
	height: 100%;
	width: 100%;
	z-index: 999;
}
#userList {
	border-radius: 10upx;
	color: black;
}
#userListItem {
	padding: 20rpx 30rpx 20rpx 30rpx;
}
.busInfoPay {
	width: 100%;
	height: 100%;
	background: linear-gradient(#01a1ea, white);
}
.passenger {
	width: 95%;
	margin: auto;
	color: #00a0ff;
	margin-top: 20upx;
	background-color: #ffffff;
}
</style>
